import { Button, message } from 'antd';
import { inject, observer } from 'mobx-react';
import { WeaTop, WeaRightMenu, WeaLocaleProvider, WeaSearchPanel, WeaLeftRightLayout, WeaNewScroll, WeaProgress } from 'ecCom'
import { WeaTableNew } from 'comsMobx'
import { toJS } from "mobx"
import { Condition, ConditionNum } from '../list/listCondition'
import ListLeftTree from '../governTree';
import GovernTag from '../governPoint/tag';
import GovernLight from '../governPoint/light';
import GovernBadge from '../governPoint/badge';
import Model from '../model/index';
import ModalConfirm from '../modalConfirm/index';
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

@inject("proStore")
@observer
class ProMain extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false
        } 
    }
    componentDidMount = () => {
        const { proStore } = this.props;
        //设置dataType
        const preDataType = this.props.location.query.dataType;
        proStore.setDataType(preDataType);
        proStore.getIsTreeShow();
        //初始化页面
        if (!proStore.isSuperSearch) {
            this.projectCountInit(proStore);
        }
        
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.location.key != this.props.location.key) {
            //设置dataType
            const { proStore } = nextProps;
            const nextDataType = nextProps.location.query.dataType;
            proStore.setDataType(nextDataType);
            proStore.getIsTreeShow();
            //刷新重新渲染
            if (!proStore.isSuperSearch) {
                proStore.setDoAgain(false);
                this.projectCountInit(proStore);
            }
        }
    }
    componentWillUpdate(nextProps) {
        //刷新重新渲染
        if (nextProps.location.key != this.props.location.key) {
            //设置dataType
            const { proStore } = nextProps;
            const nextDataType = nextProps.location.query.dataType;
            proStore.setDataType(nextDataType);
            //刷新重新渲染
            if (!proStore.isSuperSearch) {
                proStore.setDoAgain(false)
                proStore.selectedTreeKey = 0;
                this.projectCountInit(proStore);
            }
        }
    }

    componentWillUnmount() {
        this.props.proStore.clear();
    }

    projectCountInit(proStore){

        proStore.setKey1(""); //点击搜索按钮专用
        proStore.setKey2("");
        proStore.setKey3("");
        proStore.setKey4({"isContain":"","pStatus":"","psponsordept":"","ptype":"","sqlWhereDate":""});

        const categoryid = this.props.location.query.categoryid;
        const status = this.props.location.query.status;
        const sponsordept = this.props.location.query.sponsordept;
        const isContain = this.props.location.query.isContain;

        proStore.initCount({ "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": 0, "categoryid": 0} );
        if(categoryid && categoryid !=""){ //督办类型统计
            proStore.setKey1(categoryid);
            proStore.setSelectedTreeKey(categoryid);
            proStore.doSearch({ fromSuperPage: false, "categoryid": categoryid, "isSuperSearch": true, "count_categoryid": categoryid});
            let title = getLabel('500440',"类别统计");
            proStore.setTitle(title);
        }else if(status && status !=""){ //督办状态统计
            proStore.setKey2(status);
            proStore.doSearch({ fromSuperPage: false, "categoryid": 0, "isSuperSearch": true, "count_status": status});
            let title = getLabel('386394',"状态统计");
            proStore.setTitle(title);
        }else if(sponsordept && sponsordept !=""){ //督办单位统计
            proStore.setKey3(sponsordept);
            let title = getLabel('500439',"承办统计");
            proStore.setTitle(title);
            proStore.doSearch({ fromSuperPage: false, "categoryid": 0, "isSuperSearch": true, "count_sponsordept": sponsordept});
        }else if(isContain && isContain !=""){ //督办单位统计
           
            const pStatus = this.props.location.query.pStatus || "";
            const psponsordept = this.props.location.query.psponsordept || "";
            const ptype = this.props.location.query.ptype || "";
            const sqlWhereDate = this.props.location.query.sqlWhereDate|| "";

            proStore.setKey4({"isContain":isContain,"pStatus":pStatus,"psponsordept":psponsordept,"ptype":ptype,"sqlWhereDate":sqlWhereDate});
            let title = getLabel("32867", "督办任务");
            if (pStatus == "-1") {
                title = getLabel("32867", "督办任务");
            } else if (pStatus == "1") {
                title = getLabel("23736", "执行中任务");
            } else if (pStatus == "2") {
                title = getLabel("516322", "逾期任务");
            } else if (pStatus == "3") {
                title = getLabel("516323", "办结任务");
            } else if (pStatus == "4") {
                title = getLabel("500802", "延期任务");
            }
            if(psponsordept && psponsordept !=""){ //督办单位统计
                title = getLabel('500439',"承办统计");
            }
            proStore.setTitle(title);
            proStore.doSearch({ fromSuperPage: false, "categoryid": 0, "isSuperSearch": true, "isContain": isContain, "pstatus": pStatus, "psponsordept": psponsordept, "ptype": ptype, "sqlWhereDate": sqlWhereDate});
        }else{
            proStore.init({ "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": 0, "categoryid": 0 })//19.3.8 lusx 选中树,切换菜单,数据没更新,停留在上次树的key 加"categoryid":0
        }
    }
    
    render() {
        const { proStore, location: { pathname, search }, route: { path } } = this.props;
        const { status, tasklabels, form, tableStoreDbInquire, title, formB, columnsNum, modelType, id, content ,isTreeShow,onCollapse} = proStore;
        const { loading } = status;
        const { topIcon = "icon-coms-government", iconBgcolor = "#f14a2d" } = tasklabels;
        const { visible } = this.state;
        let scrollHeight = document.body.clientHeight - 129;
        let tablescroll = document.body.clientHeight - 223.89 - 54;
        return (
            <div className="g-pro">
                <div className='g-pro-proMain'>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@8qbx5w`} datas={this.getRightMenu()} style={{ color: "#ccc" }}>
                        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@66b8u6`} loading={loading} icon={<i className={topIcon} />} iconBgcolor={iconBgcolor} title={title}>
                            <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@w5zius`}
                                leftWidth={250}
                                showLeft = {isTreeShow}
                                onCollapse={(bool) => { onCollapse(bool) }}
                                leftCom={<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ybeb4a`} height={scrollHeight} ><ListLeftTree ecId={`${this && this.props && this.props.ecId || ''}_ListLeftTree@7zv53g`} treeStore={proStore} /></WeaNewScroll>}
                            >
                                <div className='g-pro-proMain-condition g-container'>

                                    <div className="1.1" style={{ width: '50%', float: "left" }}>
                                        <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@l34qpg`} listStore={proStore} type="project" form={form} col={2} handleChange={this.handleChange.bind(this)}></Condition>
                                    </div>
                                    <div className="1.2" style={{ float: "left" }}>
                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0jeonc`} type="primary" className="g-pro-proMain-serach" onClick={this.doSearch.bind(this)}>{getLabel(197, "搜索")}</Button>
                                    </div>
                                    <div className="1.3" style={{ float: 'left' }}>
                                        <WeaSearchPanel ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchPanel@nfef6h`}
                                            searched={true}
                                            searchsAd={
                                                <ConditionNum ecId={`${this && this.props && this.props.ecId || ''}_ConditionNum@lyd99b`} listStore={proStore} type="project" formB={formB} col={2} onEnterSearch={(visible) => this.setState({ visible })}></ConditionNum>
                                            }
                                            buttonsAd={this.getSearchButtons()}
                                            visible={visible}
                                            onVisibleChange={(visible) => this.setState({ visible })}
                                        />
                                    </div>
                                    <div style={{ float: 'right', marginRight: '100px' }}>
                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vxp1q1`} type="primary" className="g-pro-proMain-serach" onClick={this.doexport}>{getLabel(17416, "导出")}</Button>
                                    </div>
                                </div>
                                <div>
                                    {
                                        // (!tableStoreDbInquire.loading && toJS(tableStoreDbInquire).columns.length>0 ) && //xk:解决无数据不显示列头问题(可以删除，因为其内部自己处理了自带loading)
                                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@qzw6wd`}
                                            dragColumns='0'
                                            comsWeaTableStore={tableStoreDbInquire}
                                            hasOrder={true}
                                            //needScroll={true}
                                            getColumns={c => this.reRenderColumns(c)}
                                            onOperatesClick={this.onOperatesClick.bind(this)}
                                            scroll={columnsNum <= 10 ? { x: 0, y: tablescroll } : { x: 100 * columnsNum, y: tablescroll }}
                                        />
                                    }
                                    
                                </div>
                                <div>
                                    <Model ecId={`${this && this.props && this.props.ecId || ''}_Model@coljmj`} modelType={modelType} id={id} contentStore={proStore} pathname={pathname} search={search} routepath={path}></Model>
                                </div>
                                <div>
                                    <ModalConfirm ecId={`${this && this.props && this.props.ecId || ''}_ModalConfirm@17tscn`} modelType={modelType} id={id} content={content} confirmStore={proStore} pathname={pathname} search={search} routepath={'123456'}></ModalConfirm>
                                </div>
                            </WeaLeftRightLayout>
                        </WeaTop>
                    </WeaRightMenu>
                </div>
            </div>
        )
    }

    reRenderColumns(columns) {
        const { proStore: { getcolumnsNum } } = this.props;
        let columnsIndex = 0;
        columns.forEach(c => {
            //19.3.8 lusx 当列过多时,才显示横向滚动条
            if (c.display === "true") {
                columnsIndex = columnsIndex + 1;
            }
            if (c.dataIndex == 'progress') {
                c.render = function (text, record) {
                    return <span className='wea-prj-progressStyle' >
                        <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@fur7qv@${c.dataIndex}`} percent={record.progress || 0} />
                    </span>
                }
            } else if (c.dataIndex == 'status') {
                c.render = function (text, record) {
                    return <span >
                        <GovernTag ecId={`${this && this.props && this.props.ecId || ''}_GovernTag@sz2nc8`} record={record} />
                    </span>
                }
            } else if (c.dataIndex == 'feedstatus') {
                c.render = function (text, record) {
                    return <span >
                        <GovernLight ecId={`${this && this.props && this.props.ecId || ''}_GovernLight@ae6ybj`} record={record} showType="feedback" />
                    </span>
                }
            }
            else if (c.dataIndex == 'enddate') {
                c.render = function (text, record) {
                    return <span>
                        <GovernBadge ecId={`${this && this.props && this.props.ecId || ''}_GovernBadge@nvenck`} record={record} text={text} />
                    </span>
                }
            } else if (c.dataIndex == 'name') {
                c.render = function (text, record) {
                    let hrefText = `javaScript:hrefTaskInfo(${record.id});`
                    return <span>
                        {/*   {record.sKeyFlagspan === "1" ? <span className="g-table-cui">{getLabel('390310',"催")}</span>: null}   */}
                        <a href={hrefText} target="_self">{text}</a>
                    </span>
                }
            } else {
                c.render = function (text, record) {
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>
                }
            }
        })
        getcolumnsNum(columnsIndex+4);
        return columns;
    }
    onOperatesClick(record, index, operate, flag) {
    }
    /* 高级搜索操作按钮组 */
    getSearchButtons() {
        const { proStore } = this.props;
        const { clearFormFields } = proStore;
        const btnStyle = { borderRadius: 3, width: 80 }
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0m7iu6@search`} type="primary" style={btnStyle} onClick={this.forwardQueryResult.bind(this)}>{getLabel(197, "搜索")}</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7odv0v@reset`} type="ghost" style={btnStyle} onClick={() => { proStore.clearFormFields() }}>{getLabel(2022, "重置")}</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@60soad@cancel`} type="ghost" style={btnStyle} onClick={() => { this.cancel() }}>{getLabel(201, "取消")}</Button>)
        ]
    }
    /* 搜索面板搜索方法 */
    forwardQueryResult() {
        const { proStore } = this.props;
        const { selectedTreeKey } = proStore
        proStore.doSearch({ fromSuperPage: true, "categoryid": selectedTreeKey, "isSuperSearch": true })
        this.setState({ visible: false })
    }
    /* 高级搜索取消方法 */
    cancel() {
        this.setState({ visible: false })
    }
    /*
     * 顶部搜索，select的key值改变，执行方法
    */
    handleChange(data) {
        if (Object.keys(data)[0] == "selectKey") {
            const { proStore } = this.props;
            proStore.handleChange();
        }
    }
    getRightMenu() {
        let btns = [];
        btns.push({
            key: "search",
            icon: <i className='icon-coms-search' />,
            content: getLabel(197, "搜索"),
            onClick: this.doSearch.bind(this)
        });
        btns.push({ key: "export", icon: <i className='icon-coms-export' />, content: getLabel(17416, '导出', 'label'), onClick: () => this.doexport() });
        return btns;
    }
    
    doSearch() {
        const { proStore } = this.props;
        const { selectedTreeKey } = proStore;
        //设置dataType
        const preDataType = this.props.location.query.dataType;
        proStore.setDataType(preDataType);
        let params = { "isSuper": "0", "isSuperPage": false, "isSelect": proStore.isSelect, "fromSuperPage": false, "selectedTreeKey": 0, "categoryid": selectedTreeKey }//19.2.22加categoryid lusx
        proStore.doSearch({ ...params })
    }

    doexport = () => {
        const { proStore } = this.props;
        let selectedIds = toJS(proStore.tableStoreDbInquire.selectedRowKeysAllPages);
        const { selectedTreeKey } = proStore
        if (selectedIds.length == 0) {
            message.warning(getLabel(501159, '请选择要操作的数据'));
        } else {
            proStore.exportGovernExcel(selectedIds, "27", getLabel(17416, "导出"), getLabel('508054', "确认要导出吗？"), selectedTreeKey, '2');
        }

    }
}

export default ProMain;
